<template>
  <!-- 基本表单验证
    1：将表单元素的值双向绑定
    2:el-form
       model:整 个表单元素的对象
       rules:所有的表单元素的规则都写到它身上，它是一个对象
       rules:{
        prop的值:[
        {required:true,message:'错误信息',trigger:'blur/change'},
        {min:最小长度,max:最大长度,message:'错误信息',trigger:'blur/change'},
        {pattern:正则,message:'错误信息',trigger:'blur/change'}
        ]
       }
    3:el-form-item
       prop:对应表单元素值的字段名  -->

  <!-- 全局表单验证
          1先完成基本表单验证
          2调用el-form内的方法实现全局表单验证  
               a:el-form  ref="form"
               b:this.$refs.form.validate((result)=>{
                result是一个验证结果的boolean值
                    true:验证通过
                    false:验证失败
               })     
               c:this.$refs.form.resetFields()  重置表单，移除校验结果    -->
  <div>
    <el-form label-width="80px" :model="form" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '必填', trigger: 'change' },
          { min: 5, max: 20, message: '请输入5-20位用户名', trigger: 'change' }
        ],
        password: [
          { required: true, message: '必填', trigger: 'change' },
          {
            pattern: /^\w{5,20}$/,
            message: '请输入5-20位密码',
            trigger: 'change'
          }
        ]
      }
    }
  }
}
</script>
<style></style>
